<template>
  <div class="lb-table">
    <el-table
      ref="elTable"
      :header-cell-style="{
        background: 'rgb(60 127 97)',
        color: 'white',
        fontSize: '14px',
      }"
      class="tableClss"
      border
      v-bind="$attrs"
      :data="data"
      :span-method="merge ? mergeMethod : spanMethod"
      :row-class-name="tableRowClassName"
      :max-height="maxHeight"
      highlight-current-row
      @current-change="handleCurrentChange"
      v-on="$listeners"
    >
      <table-column
        v-for="(item, index) in column"
        :key="index"
        v-bind="$attrs"
        :column="item"
      />
    </el-table>
    <el-pagination
      v-if="pagination"
      class="lb-table-pagination"
      v-bind="$attrs"
      :total="total"
      :style="{ 'margin-top': paginationTop, 'text-align': paginationAlign }"
      v-on="$listeners"
      @current-change="paginationCurrentChange"
    />
    <p v-if="showTotal" class="res-text">共搜到 {{ total }} 条数据</p>
  </div>
</template>

<script>
import TableColumn from "./TableColumn";
export default {
  components: {
    TableColumn,
  },
  props: {
    maxHeight: {
      type: String,
      default: () => "750px",
    },
    auths: {
      type: String,
      default: () => "",
    },
    column: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    spanMethod: {
      type: Array,
      default: () => [],
    },
    pagination: {
      type: Boolean,
      default: false,
    },
    paginationTop: {
      type: String,
      default: "15px",
    },
    paginationAlign: {
      type: String,
      default: "right",
    },
    total: {
      type: Number,
      default: () => 0,
    },
    merge: {
      type: Array,
      default: () => [],
    },
    //  设置 禁用 行 的 样式
    rowClass: {
      type: Object,
      default: () => null,
    },
    // 是否显示 总条数 默认显示
    showTotal: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      mergeLine: {},
      mergeIndex: {},
      currentRow: null,
    };
  },
  computed: {
    dataLength() {
      return this.data.length;
    },
    // isOperationArr() {
    //   return this.column.filter(_x => _x.isOperation === true)
    // }
  },
  watch: {
    merge() {
      this.getMergeArr(this.data, this.merge);
    },
    dataLength() {
      this.getMergeArr(this.data, this.merge);
    },
  },
  created() {
    this.getMergeArr(this.data, this.merge);
  },
  methods: {
    handleCurrentChange(val) {
      console.log("我被点击了")
      this.currentRow = val;
      this.$emit("handleCurrentChange", val, "");
    },
    headerClass({ row, rowIndex }) {
      return "background:rgba(242, 242, 242, 1);";
    },
    tableRowClassName({ row, rowIndex }) {
      if (this.rowClass) {
        if (row[this.rowClass.RowName] === this.rowClass.RowValue) {
          return "disbaleRow";
        }
      }
      if (rowIndex % 2 === 0) {
        return "";
      }

      return "successrow";
    },
    clearSelection() {
      this.$refs.elTable.clearSelection();
    },
    toggleRowSelection(row, selected) {
      this.$refs.elTable.toggleRowSelection(row, selected);
    },
    toggleAllSelection() {
      this.$refs.elTable.toggleAllSelection();
    },
    toggleRowExpansion(row, expanded) {
      this.$refs.elTable.toggleRowExpansion(row, expanded);
    },
    setCurrentRow(row) {
      this.$refs.elTable.setCurrentRow(row);
    },
    clearSort() {
      this.$refs.elTable.clearSort();
    },
    clearFilter(columnKey) {
      this.$refs.elTable.clearFilter(columnKey);
    },
    doLayout() {
      this.$refs.elTable.doLayout();
    },
    sort(prop, order) {
      this.$refs.elTable.sort(prop, order);
    },
    paginationCurrentChange(val) {
      this.$emit("p-current-change", val);
    },
    getMergeArr(tableData, merge) {
      if (!merge) return;
      this.mergeLine = {};
      this.mergeIndex = {};
      merge.forEach((item, k) => {
        // console.log(k);
        tableData.forEach((data, i) => {
          if (i === 0) {
            this.mergeIndex[item] = this.mergeIndex[item] || [];
            this.mergeIndex[item].push(1);
            this.mergeLine[item] = 0;
          } else {
            if (data[item] === tableData[i - 1][item]) {
              this.mergeIndex[item][this.mergeLine[item]] += 1;
              this.mergeIndex[item].push(0);
            } else {
              this.mergeIndex[item].push(1);
              this.mergeLine[item] = i;
            }
          }
        });
      });
    },
    mergeMethod({ row, column, rowIndex, columnIndex }) {
      const index = this.merge.indexOf(column.property);
      if (index > -1) {
        const _row = this.mergeIndex[this.merge[index]][rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log(rowIndex, columnIndex, index, _row, _col);
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
  },
};
</script>
<style lang="less" scoped>
.el-table /deep/ .successrow {
  background: #70baa6;
  color: white;
}
.el-table /deep/ .disbaleRow {
  background: red;
  color: white;
}
/*选中的样式*/
.el-table /deep/ .el-table__body tr.current-row > td {
  background-color: #b65f5ff7  !important;
  color: #ffffff;
}

</style>
